<!--
 * @Author: 张旭东 zxd12345688@qq.com
 * @Date: 2025-09-11 09:02:19
 * @LastEditors: 张旭东 zxd12345688@qq.com
 * @LastEditTime: 2025-09-17 10:01:33
 * @FilePath: \前端\city\src\pages\components\Title.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="title-container">
        <div class="title-icon"></div>
        <div class="title-text">{{ title }}</div>
    </div>
</template>
<script>
export default {
    name: 'Title',
    props: {
        title: {
            type: String,
            required: true,
            default: '标题'
        }
    }
};
</script>
<style lang="less" scoped>
.title-container {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.title-icon {
    width: 24px;
    height: 30px;
    background-image: url(../../assets/layout/box_title_icon.png);
    background-size: 100% 100%;
    margin-right: 10px;
    background-repeat: no-repeat;
}
.title-text {
    font-size: 20px;
    font-family: "楷体";
    line-height: 30px;
    color: white; /* 关键：添加白色文字 */
}
</style>
